<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>APP</title>
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../css/aui-eg.css" />
		<style>
		    ul li{
		        border-right:1px solid #EEEEEE;
		        border-bottom:1px solid #eeeeee;
		        box-sizing: border-box;
		        font-size:14px;
		    }
		    ul li:last-child{
		        border-right:0;
		    }
		</style>
	</head>
	<body>
		<header id="panel_header" class="aui-bar aui-bar-nav aui-bar-pro">
			<a onclick="systemBack();" class="aui-pull-left"> <span class="aui-iconfont aui-icon-left"></span> </a>
			<span class="aui-title">筛选弹出菜单</span>
		</header>
		<ul id="panel_select" class="aui-bar aui-bar-white">
    		<li onclick="proArea(this);" class="aui-col-xs-4 aui-text-center"><label>地区</label><span class="aui-iconfont aui-icon-unfold aui-text-warning" style="padding-left:3px;"></span></li>
    		<li onclick="proType(this);" class="aui-col-xs-4 aui-text-center"><label>类型</label><span class="aui-iconfont aui-icon-unfold aui-text-warning" style="padding-left:3px;"></span></li>
    		<li onclick="proSort(this);" class="aui-col-xs-4 aui-text-center"><label>排序</label><span class="aui-iconfont aui-icon-unfold aui-text-warning" style="padding-left:3px;"></span></li>
		</ul>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/aui-eg.js"></script>
	<script type="text/javascript">
		apiready = function() {
			var header = $api.byId('panel_header');
			$api.fixStatusBar(header);
			var headerPos = $api.offset(header);
			var select = $api.byId('panel_select');
			var selectPos = $api.offset(select);
			api.openFrame({
				name : 'main',
				url : 'modal_select_frm.html',
				bounces : false,
				rect : {
					x : 0,
					y : headerPos.h + selectPos.h,
					w : "auto",
					h : api.winHeight - headerPos.h - selectPos.h
				}
			});
			api.parseTapmode();
		};
		function systemBack() {
			api.closeWin();
		}
		
		function proArea(obj){
			var header = $api.byId('panel_header');
			var headerPos = $api.offset(header);
			var select = $api.byId('panel_select');
            var selectPos = $api.offset(select);
            var textDefault = $api.text($api.dom(obj, "label"));
            var textData = [
                    "北京","-","上海","-","广州","-","深圳","-","成都"
                ];
			$api.removeCls($api.dom(obj, "span"), "aui-icon-unfold");
            $api.addCls($api.dom(obj, "span"), "aui-icon-fold");
			$aui.topMenu({
				modalOpacity : "0.0",
				x : 0,
				y : headerPos.h + selectPos.h,
				w : api.winWidth,
				h : 200,
				point : "off",
				pointX : 90,
				pointW : 10,
				pointH : 10,
				menuBgColor : "rgba(255,255,255,0.8)",
				menuRadius : "0",
				textColor : "#000000",
				activeColor : "#ffa604",
				activeBgColor : "#eeeeee",
				textAlign : "center",
				textSize : 14,
				textData : textData,
				lineColor : "#eeeeee",
				textDefault : textDefault
			}, function(index) {
				if(index != "-1"){
					$api.text($api.dom(obj, "label"),textData[index]);
				}
				$api.removeCls($api.dom(obj, "span"), "aui-icon-fold");
                $api.addCls($api.dom(obj, "span"), "aui-icon-unfold");
			});
		}
		
		function proType(obj){
			var header = $api.byId('panel_header');
			var headerPos = $api.offset(header);
			var select = $api.byId('panel_select');
            var selectPos = $api.offset(select);
            var textDefault = $api.text($api.dom(obj, "label"));
            var textData = [
                    "类型一","-","类型二","-","类型三"
                ];
			$api.removeCls($api.dom(obj, "span"), "aui-icon-unfold");
            $api.addCls($api.dom(obj, "span"), "aui-icon-fold");
			$aui.topMenu({
				modalOpacity : "0.0",
				x : 0,
				y : headerPos.h + selectPos.h,
				w : api.winWidth,
				h : 200,
				point : "off",
				pointX : 90,
				pointW : 10,
				pointH : 10,
				menuBgColor : "rgba(255,255,255,0.7)",
				menuRadius : "0",
				textColor : "#000000",
				activeColor : "#ffa604",
				activeBgColor : "#eeeeee",
				textAlign : "left",
				textSize : 14,
				textData : textData,
				lineColor : "#eeeeee",
				textDefault : textDefault
			}, function(index) {
				if(index != "-1"){
					$api.text($api.dom(obj, "label"),textData[index]);
				}
				$api.removeCls($api.dom(obj, "span"), "aui-icon-fold");
                $api.addCls($api.dom(obj, "span"), "aui-icon-unfold");
			});
		}
		
		function proSort(obj){
			var header = $api.byId('panel_header');
			var headerPos = $api.offset(header);
			var select = $api.byId('panel_select');
            var selectPos = $api.offset(select);
            var textDefault = $api.text($api.dom(obj, "label"));
            var textData = [
                    "按默认排序","-","按时间排序","-","按价格排序","-","按热度排序","-","按销量排序"
                ];
			$api.removeCls($api.dom(obj, "span"), "aui-icon-unfold");
            $api.addCls($api.dom(obj, "span"), "aui-icon-fold");
			$aui.topMenu({
				modalOpacity : "0.0",
				x : 0,
				y : headerPos.h + selectPos.h,
				w : api.winWidth,
				h : 200,
				point : "off",
				pointX : 90,
				pointW : 10,
				pointH : 10,
				menuBgColor : "rgba(255,255,255,0.6)",
				menuRadius : "0",
				textColor : "#000000",
				activeColor : "#ffa604",
				activeBgColor : "#eeeeee",
				textAlign : "right",
				textSize : 14,
				textData : textData,
				lineColor : "#eeeeee",
				textDefault : textDefault
			}, function(index) {
				if(index != "-1"){
					$api.text($api.dom(obj, "label"),textData[index]);
				}
				$api.removeCls($api.dom(obj, "span"), "aui-icon-fold");
                $api.addCls($api.dom(obj, "span"), "aui-icon-unfold");
			});
		}
		
	</script>
</html>